<template>
  <div>
     <!-- 主体部分 -->
     <div class="main">
      <section class="banner">
        <ul>
          <li><img src="/images/img/banner_01.jpg" alt="banner"></li>
        </ul>
      </section>
      <!-- 关于 -->
      <section class="about">
        <h1 class="title">WELCOME TO NEWMAN</h1>
        <p class="content">
          纽曼公司创立于1996年，现有员工2000余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。
        </p>
        <article>
          <div class="box">
            <img src="img/index-cultural01.png" width="44" height="44">
            <h2>CULTURAL <div>企业文化</div>
            </h2>
            <p>优秀的企业文化能给企业注入蓬勃的活力，是企业的灵魂。纽曼十分注重自身企业文化建设，将企业文化的精髓传递给每一位员工。</p>
          </div>
          <div class="box">
            <img src="img/index-cultural02.png" width="44" height="44">
            <h2>HONOUR <div>企业荣誉</div>
            </h2>
            <p>纽曼历年来坚持不懈地努力，以品质求生存，以创新谋发展，从而打造出众多经典产品，得到了用户以及行业媒体的普遍肯定与褒奖。</p>
          </div>
          <div class="box">
            <img src="img/index-cultural03.png" width="44" height="44">
            <h2>QUALIFICATION <div>资格认证</div>
            </h2>
            <p>纽曼长期以来将科学化管理放在首位，并将产品质里视为企业命脉，经过长期不懈的系统化学习和实践，逐步通过了IS09001质里管理体系认证。</p>
          </div>
          <div class="box">
            <img src="img/index-cultural04.png" width="44" height="44">
            <h2>RESEARCH <div>研究开发</div>
            </h2>
            <p>纽曼一直以来把产品技术研发创新作为产品的核心竞争力，组建了一支专业的、国际化的研发团队，拥有专业研发技术人员近300名。</p>
          </div>
        </article>
      </section>
      <!-- 消息 -->
      <section class="news">
        <h1 class="title">NEWS CENTER</h1>
        <p class="content">纽曼品牌数年来培育了数千万忠实用户，特别是得到了中国广大年轻用户的喜爱和认可，纽曼公司拥有一大批经验丰富的市场和品牌推广团队，每年拥有数千万的市场和品牌推广资金。</p>
        <article>
          <div class="box1">
            <img src="img/news01.png">
            <div>AWE2016开幕，企业巨头竞相争艳，大咖云集</div>
          </div>
          <div class="box2">
            <div class="hot">
              <div class="date">
                <div class="day">15</div>
                <div class="year">2016-03</div>
              </div>
              <div class="text">
                <h3><a href="">AWE2016开幕，企业巨头竞相争艳，大咖云集</a></h3>
                <p>
                  2016年3月9日9:30，由中国家电协会主办的中国家电及消费电子博览会—上海2016在上海新国际博览中心隆重开幕。在这个全球瞩目、亚太区最大规模的家电展会上
                </p>
              </div>
            </div>
            <ul>
              <li class="first"><a href="">· 三大“黑科技”锁定中国消费者的心<time>2016-03-15</time></a></li>
              <li><a href="">· 正品控宣言：让商品拥有独一无二的身份证<time>2016-03-15</time></a></li>
              <li><a href="">· 2016AWE：方太最全智能嵌入式厨电套系亮相<time>2016-03-15</time></a></li>
              <li><a href="">· 美的焖香鼎釜IH智能电饭煲全球首发 <time>2016-03-15</time></a></li>
              <li><a href="">· AWE2016盛大开幕 释放家电业“引力波” <time>2016-03-14</time></a></li>
              <li><a href="">· 2016年中国家电发展高峰论坛文字实录 <time>2016-03-14</time></a></li>
            </ul>
          </div>
        </article>
      </section>
    </div>
    <!-- 酒店推荐模块 -->
    <HotelRecommend>
    </HotelRecommend>
 <!-- <router-view></router-view> -->

  </div>
</template>

<script>
import HotelRecommend from './hotelRecommend/index.vue'
export default {
  name: 'HotelSystemIndex',
  components: {
    HotelRecommend
  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
// 主体
.main {
  width: 1515px;
  height: 300px;
  margin: 0 auto;
  margin-top: 90px;

  .banner ul {
      width: 100%;

      li {
          img {
              max-width: 100%;
          }
      }
  }

  // 关于
  section {
      margin-bottom: 20px;
      display: block;
      text-align: center;
  }

  section .title {
      margin-bottom: 30px;
  }

  section p {
      font-size: 14px;
      color: #666666;
  }

  article {
      display: flex;
  }

  .about {
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 30px;
  }

  .content {
      width: 1020px;
      margin: 0 auto;
  }

  .about h1 {
      line-height: 40px;
  }

  .title:after {
      content: "";
      background-color: #01a1ff;
      display: block;
      width: 40px;
      height: 4px;
      margin: 0 auto;
  }

  .about .box {
      width: 21%;
      float: left;
  }

  .about .box {
      margin: 20px;
  }

  .about .box h2 {
      margin-bottom: 30px;
  }

  .about .box div {
      color: #666666;
      font-size: 16px;
  }

  .about .box img {
      margin-left: 100px;
      margin-bottom: 50px;
      margin-top: 50px;
  }

  // 消息
  .news {
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 40px;
  }

  .news .content {
      margin-bottom: 30px;
  }

  .box1 {
      position: relative;
      width: 50%;
      height: 300px;
  }

  .box1 img {
      height: 292px;
      margin-left: 28px;
  }

  .box1 div {
      font-size: 14px;
      position: absolute;
      left: 28px;
      bottom: 8px;
      color: #ffffff;
      width: 525px;
      height: 40px;
      line-height: 40px;
      background-color: #00aaff;
  }

  .box2 {
      width: 50%;
  }

  .box2 .hot {
      overflow: hidden;
      height: 85px;
      margin-bottom: 2px;
  }

  .box2 .date {
      width: 10%;
      height: 100px;
      float: left;
  }

  .box2 .date .day {
      font-size: 25px;
      padding: 10px;
      border: 1px #00aaff solid;
      font-weight: bolder;
      color: #00aaff;
  }

  .box2 .date .year {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      background-color: #00aaff;
      color: #ffffff;
  }

  .text {
      width: 50%;
      float: left;
      margin-left: 10px;
      text-align: left;
  }

  .text p {
      width: 550px;
      text-align: left;
      padding-top: 5px;
      font-size: 10px;
      color: #949494;
      -webkit-transform-origin-x: 0;
      transform: scale(0.89);
  }

  .text h3 a {
      color: #00aaff;
  }

  .box2 ul {
      width: 50%;
      position: relative;
  }

  .box2 .first {
      border-top: 1px #9f9f9f dashed;
  }

  .box2 li {
      width: 549px;
      text-align: left;
      line-height: 33px;
      border-bottom: 1px #9f9f9f dashed;
  }

  .box2 a {
      color: #666666;
  }

  .box2 li time {
      position: absolute;
      right: -250px;
  }
}
</style>
